<template>
  <div class="bg">
    <div class="container" id="all">
        <h1 id="titleName">Welcome</h1>
        <div class="form" id="form">
            <input type="text" placeholder="您的账号" v-model="LoginParam.username">
            <input type="password" placeholder="您的密码" v-model="LoginParam.password">
            <div>
			    <input type="checkbox" style="width:20px" v-model="LoginParam.rememberMe">三天内免登录
            </div>
            <div>
                <button class="btn-login" @click="toLogin">登录</button>
                <button class="btn-login" @click="toRegister">注册</button>
            </div>
        </div>
    </div>
    <ul class="bg-squares">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
  </div>
</template>

<script>
import AES from '@/util/crypto';
import Cookies from 'js-cookie';
import debounce from 'lodash/debounce';
export default {
    name:'Login',
    data(){
      return{
        LoginParam:{
            username:'',
            password:'',
            rememberMe:false
        }
      }
    },
    methods:{
      toLogin:debounce(function(){
        //执行登录方法，执行通过执行下方动画
        document.getElementById("titleName").innerText="LOGIN....";
        document.querySelector('.container').classList.add('success');

        // 调用仓库，执行登录
        this.$store.dispatch("login/toLoginByup",this.LoginParam)
        
      },500),
      toRegister(){
        this.$router.push({
            name:'Register'
        })
      }
    },
    mounted(){
        if(Cookies.get("usernameToken")!==undefined){
            this.LoginParam.username=AES.decrypt(Cookies.get("usernameToken"));
        }
        if(Cookies.get("passwordToken")!==undefined){
            this.LoginParam.password=AES.decrypt(Cookies.get("passwordToken"));
        }
    }
} 
</script>

<style scoped lang="css">
   *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  .bg{
      position: absolute;
      height: 90%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to top left,#03A89E,#33A1C9,#B0E0E6);
      overflow: hidden;
  } 
  .container{
      text-align: center;
      color: #fff;
  }
  .container h1{
      font-family:'Courier New', Courier, monospace;
      font-size: 40px;
      font-weight: 100;
      letter-spacing: 2px;
      margin-bottom: 15px;
      /* 过渡效果 */
      transition: 1s ease-in-out;
  }
  .form{
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 2;
      opacity: 1;
      /* 不透明度改变时的过渡效果 */
      transition: opacity 0.5s;
  }
  .form input{
      outline: none;
      border: 1px solid rgba(255, 255, 255, 0.4);
      background-color: rgba(255, 255, 255, 0.2);
      width: 250px;
      padding: 10px 15px;
      border-radius: 10px;
      margin: 0 auto 10px auto;
      text-align: center;
      color: #fff;
      font-size: 15px;
      transition: 0.25s;
  }
  .form input::placeholder{
      color: #fff;
      font-size: 14px;
      font-weight: 300;
  }
  .form input:hover{
      background-color: #fff;
  }
  .form input:focus{
      background-color: #f5f7f98f;
      width: 300px;
      color: #ff719a;
  }
  .btn-login{
      outline: none;
      background-color:rgba(255, 255, 255, 0);
      color: rgb(240, 241, 241);
      border: none;
      width: 120px;
      padding: 10px 15px;
      border-radius: 10px;
      font-size: 15px; 
      font-weight: 800;
      cursor: pointer;
      transition: 0.25s;
  }
  .btn-login:hover{
      background-color: #f5f7f98f;
  }
  /* 背景方块*/
  .bg-squares{
      list-style: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 90%;
      height: 70%;
      z-index: 1;
  }
  .bg-squares li{
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.15);
      position: inherit;
      bottom: -160px;
      /* 执行动画：动画名 时长 线性 无限次播放*/
      animation: squres 10s linear infinite ;
  }
  /* 为每一个方块设置不同的位置、大小、动画延迟时间、动画时长、背景色  */
  .bg-squares li:nth-child(1){
      left: 10%;
  }
  .bg-squares li:nth-child(2){
      left: 20%;
      width: 80px;
      height: 80px;
      /* 动画延迟时间 */
      animation-delay:1s;
      /* 动画时长 */
      animation-duration: 40s;
  }
  .bg-squares li:nth-child(3){
      left: 25%;
      animation-delay: 1s;
  }
  .bg-squares li:nth-child(4){
      left: 40%;
      width: 60px;
      height: 60px;
      background-color:rgba(255, 255, 255, 0.25) ;
      animation-duration: 40s;
  }
  .bg-squares li:nth-child(5){
      left: 70%;
  }
  .bg-squares li:nth-child(6){
      left: 80%;
      width: 120px;
      height:120px;
      background-color:rgba(255, 255, 255, 0.2) ;
      animation-delay: 3s;
  }
  .bg-squares li:nth-child(7){
      left: 32%;
      width: 160px;
      height: 160px;
      animation-delay: 3s;
  }
  .bg-squares li:nth-child(8){
      left: 55%;
      width: 20px;
      height: 20px;
      animation-delay: 3s;
      animation-duration: 40s;
  }
  .bg-squares li:nth-child(9){
      left: 25%;
      width: 10px;
      height: 10px;
      background-color: rgba(255, 255, 255, 0.3);
      animation-delay: 3s;
      animation-duration: 40s;
  }
  .bg-squares li:nth-child(10){
      left: 90%;
      width: 160px;
      height: 160px;
      animation-delay: 3s;
  }
  .container.success h1{
      transform: translateY(75px);
  }
  .container.success .form{
      display: none;
  }
  /*定义动画*/
  @keyframes squres{
      0%{
          transform: translateY(0);
      }
      100%{
          transform: translateY(-120vh) rotate(600deg);
      }
  }
</style>